import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from "react-router-dom";

import Home from './pages/home'
import Index from './pages/index'
import List from './pages/list'
import Video from './pages/video/index'

function AppRouter() {
  const routerConfig = [
    {path: '/home', exact: true, title: '博客首页', component: Home},
    {path: '/', exact: true, title: 'Index', component: Index},
    {path: '/list/123', pathRoute: '/list/:id', exact: false, title: 'List', component: List},
    {path: '/video', exact: false, title: '视频教程', component: Video},
  ]
  return (
    <Router>
      <div className="links-wrap">
        <h1>一级导航</h1>
        <ul>
          {
            routerConfig.map((item, index) => {
              return (<li key={index}><Link to={item.path}>{item.title}</Link></li>)
            })
          }
        </ul>
      </div>
      <div className="page-content">
        {
          routerConfig.map((item, index) => {
            return (<Route key={index} path={item.pathRoute || item.path} exact={item.exact} component={item.component}/>)
          })
        }
      </div>
    </Router>
  )
}

export default AppRouter
